<template>
  <div>
    <MyNav></MyNav>
    <!-- 轮播图 -->
    <swiper
      :modules="modules"
      :loop="true"
      :slides-per-view="1"
      :space-between="50"
      :autoplay="{ delay: 4000, disableOnInteraction: false }"
      navigation
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: true }"
    >
      <!-- loop可循环轮播，autoplay可自动播放 -->
      <swiper-slide v-for="(item, index) in banner" :key="'banner' + index">
        <img :src="item.imgSrc" alt="banner" height="390" class="banner-img">
      </swiper-slide>
    </swiper>

  
    <div class="notice">
      <div class="xin">
        <el-button type="primary">公告</el-button>
        <router-link to="">iBOX APP下载及官网访问方式指引</router-link>
        <router-link to="">加入iBOX官方社群</router-link>
        <router-link to="">iBOX APP下载及官网访问方式指引</router-link>
        <router-link to="">加入iBOX官方社群</router-link>
        <router-link to="">iBOX APP下载及官网访问方式指引</router-link>
        <router-link to="/notice">更多></router-link>
      </div>
    </div>
    <ProductList :urls="ShopList" :key="ShopList.length" />
    <MyFoot></MyFoot>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from "vue";
import MyNav from "../components/MyNav.vue";
import MyFoot from "../components/MyFoot.vue";
import ProductList from "../components/ProductList.vue";
import { getShopList, getBannerList } from '@/api/api';
// 引入swiper组件
import { Swiper, SwiperSlide } from "swiper/vue";
// 引入swiper样式（按需导入）
import "swiper/css";
import "swiper/css/pagination"; // 轮播图底面的小圆点
// import 'swiper/css/navigation' // 轮播图两边的左右箭头
// import 'swiper/css/scrollbar'  // 轮播图的滚动条
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper";

interface IBannerType {
  _id: string;
  imgName: string;
  imgSrc: string;
}

// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, Scrollbar];

//轮播图数据模拟
const banner = ref<IBannerType[]>([]);

interface ListType {
  _id: string;
  缩略图: string;
  "album-name": string;
  price: string;
}
//列表数据
const ShopList = ref<ListType[]>([]);
onMounted(async () => {
  let res: any = await getShopList();
  ShopList.value = [...ShopList.value, ...res.data.data];
  let resBan: any = await getBannerList()
  banner.value = [...banner.value, ...resBan.data.data]
  console.log(banner.value);
});
</script>

<style lang="scss" scoped>
.swiper-slide {
  background-color: #bfc;
  height: 390px;
}

.swiper-button-prev,
.swiper-button-next {
  transform: translateY(-50%);
}
.xin {
  width: 1200px;
  margin: auto;
}
.notice {
  .xin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    a {
      text-decoration: none;
      color: #999;
    }
  }
  border-bottom: 1px solid #e6e6e6;
}

.banner-img {
  width: 100%;
}
</style>